<template>
	<cl-crud :ref="setRefs('crud')" @load="onLoad">
		<el-row type="flex" align="middle">
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<!-- 新增按钮 -->
			<cl-add-btn />
			<!-- 删除按钮 -->
			<cl-multi-delete-btn>批量删除</cl-multi-delete-btn>
			<cl-export-btn type="success" :columns="table.columns" />
			<!-- <el-button @click="show" size="mini">显示</el-button> -->
			<cl-flex1 />
			<!-- <cl-search-key
				field="name"
				:field-list="[
					{
						label: '姓名',
						value: 'name'
					}
				]"
			></cl-search-key> -->
			<!-- 关键字搜索 -->
			<cl-search-key placeholder="请输入姓名或者学号，支持模糊查询" />
		</el-row>
		<el-row>
			<cl-filter label="状态">
				<el-select
					size="mini"
					v-model="form.status"
					@change="searchSubmit"
					style="width: 20px"
				>
					<el-option :key="all" :value="null" label="全部"></el-option>
					<el-option
						v-for="item in status_list"
						:key="item.value"
						:value="item.value"
						:label="item.label"
					></el-option>
				</el-select>
			</cl-filter>
			<cl-flex1 />
			<el-button size="mini" type="success" @click="resetSerach">重置</el-button>
		</el-row>

		<el-row>
			<!-- 数据表格 -->
			<cl-table :ref="setRefs('table')" v-bind="table" v-if="is_show">
				<template #column-birthday="{ scope }">
					{{ scope.row.birthday.slice(0, 10) }}
				</template>
				<template #column-into_date="{ scope }">
					{{ scope.row.into_date.slice(0, 10) }}
				</template>
			</cl-table>
			<!-- <able v-if="is_show1"></able> -->
		</el-row>

		<el-row type="flex">
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</el-row>

		<!-- 新增、编辑 -->
		<cl-upsert :ref="setRefs('upsert')" v-bind="upsert" @opened="onUpsertOpen" />
	</cl-crud>
</template>

<script lang="ts">
import { defineComponent, inject, onMounted, reactive, ref } from "vue";
import { CrudLoad, Upsert, Table } from "cl-admin-crud-vue3/types";
import { useRefs } from "/@/core";
import able from "../components/table.vue";
import { getNowFormatDate } from "/@/core/utils";
import axios from "axios";
import { baseUrl, URL } from "/@/config/env";

export default defineComponent({
	components: {
		able
	},
	setup() {
		const { refs, setRefs } = useRefs();
		// 请求服务
		const service = inject<any>("service");

		const is_show = ref(true);
		const is_show1 = ref(false);

		// 打开对话的钩子函数
		const onUpsertOpen = (data, { submit, done, close }) => {};

		// 自定义筛选
		const form = ref({
			status: 2
		});

		// 筛选按钮提交
		const searchSubmit = function (e) {
			console.log(form.value.status);
			refs.value.crud.refresh({ ...form.value });
		};

		// 重置筛选条件

		const resetSerach = function () {
			form.value = {
				status: null
			};
			refs.value.crud.refresh({ ...form.value });
		};

		// 定义学生状态
		const status_list = ref([]);

		// 获取学生状态
		const getStudentNum = async function () {
			const res = await service.base.system.param.list({ keyName: "studentStatus" });
			// 将json字符串转换为json对象
			let ret = eval("(" + res[0].data + ")");
			ret.forEach((item) => {
				status_list.value.push({
					value: item.value,
					label: item.label
				});
			});
		};

		onMounted(() => {
			// 获取学生列表
			getStudentNum();
			// searchSubmit()
		});



		// 新增、编辑配置
		const upsert = reactive<Upsert>({
			items: [
				{
					type: "tabs",
					props: {
						labels: [
							{
								label: "学生基本信息",
								value: "students"
							},
							{
								label: "财务信息",
								value: "financial"
							}
						]
					}
				},
				{
					prop: "photo",
					label: "照片",
					span: 24,
					group: "students",
					// hook: {
					// 	bind: ["split"], // 绑定通道流程，分割 -> 转成number -> 绑定值
					// 	// submit: ["join"] // 提交通道流程，逗号拼接 -> 提交
					// },
					component: {
						// name: "slot-file"
						name: "cl-upload",
						props: {
							// name: "file",
							// type:'text',
							multiple: false,
							rename: false,
							accept: "*",
							// showButton: true,
							// listType: "text",
							limitSize: 50,
							data: { name: "name" },
							showFileList: true
						}
					}
				},
				{
					prop: "name",
					label: "姓名",
					span: 24,
					group: "students",
					component: {
						name: "el-input",
						props: {
							placeholder: "请输入姓名"
						}
					},
					rules: {
						required: true,
						message: "姓名不能为空"
					}
				},
				{
					prop: "student_id",
					label: "学号",
					span: 24,
					group: "students",
					component: {
						name: "el-input",
						disabled: true,
						props: {
							placeholder: "学号自动生成"
						}
					}
				},
				{
					prop: "gender",
					label: "性别",
					span: 24,
					group: "students",
					value: 1,
					component: {
						name: "el-radio-group",
						options: [
							{
								label: "男",
								value: 1
							},
							{
								label: "女",
								value: 0
							},
							{
								label: "未知",
								value: 2,
								type:'info'
							}
						]
					},
					rules: {
						required: true,
						message: "性别不能为空"
					}
				},
				{
					prop: "id_card_number",
					label: "身份证号码",
					span: 24,
					group: "students",
					component: {
						name: "el-input",
						props: {
							placeholder: "请输入身份证号码"
						},
						maxlength: 18,
						minlength: 18,
					},
					rules: {
						required: false,
						message: "输入的身份证号码格式有误！",
						pattern:
							/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
						min: 18,
						max: 18
					}
				},
				{
					prop: "birthday",
					label: "出生日期",
					span: 24,
					group: "students",
					component: {
						name: "el-date-picker",
						props: {
							placeholder: "请选择出生日期",
						}
					},
					rules: {
						required: true,
						message: "出生日期不能为空"
					}
				},
				{
					prop: "phone",
					label: "手机号",
					span: 24,
					group: "students",
					component: {
						name: "el-input",
						props: {
							placeholder: "请输入手机号"
						},
						maxlength: 11
					},
					rules: {
						required: true,
						message: "输入的手机号码格式有误！",
						pattern:
							/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
						min: 11,
						max: 11
					}
				},
				{
					prop: "status",
					label: "状态",
					span: 24,
					value: 2,
					group: "students",
					component: {
						name: "el-radio-group",
						options: [
							{
								label: "在读",
								value: 2
							},
							{
								label: "停课",
								value: 1
							},
							{
								label: "停学",
								value: 0
							}
						]
					},
					rules: {
						required: true,
						message: "状态不能为空"
					}
				},
				{
					prop: "into_date",
					label: "报名日期",
					span: 24,
					group: "students",
					component: {
						name: "el-date-picker",
						props: {
							placeholder: "请选择报名日期",
						}
					},
					rules: {
						required: true,
						message: "报名日期不能为空"
					}
				},
				{
					prop: "stop_time",
					label: "暂停时间",
					span: 24,
					group: "students",
					component: {
						name: "el-date-picker",
						props: {
							placeholder: "请选择暂停时间",
						}
					}
				},
				{
					prop: "note",
					label: "备注",
					span: 24,
					group: "students",
					component: {
						name: "el-input",
						type: "textarea",
						size: "medium",
						props: {
							placeholder: "请输入备注"
						}
					}
				},
				{
					prop: "money",
					label: "金额（元）",
					span: 12,
					hidden: ":isEdit",
					group: "financial",
					component: {
						name: "el-input-number",
						props: {
							placeholder: "请输入金额"
						}
					},
					rules: {
						required: true,
						message: "金额不能为空"
					}
				},
				{
					prop: "into_date",
					label: "入账日期",
					span: 12,
					hidden: ":isEdit",
					group: "financial",
					component: {
						name: "el-date-picker",
						props: {
							placeholder: "请选择入账日期",
						}
					},
					rules: {
						required: true,
						message: "入账日期不能为空"
					}
				},
				{
					prop: "common_num",
					label: "常规课课时",
					span: 12,
					hidden: ":isEdit",
					group: "financial",
					value: 40,
					component: {
						name: "el-input-number",
						props: {
							placeholder: "请输入常规课课时"
						}
					},
					rules: {
						required: true,
						message: "常规课课时不能为空"
					}
				},
				{
					prop: "special_num",
					label: "特殊课课时",
					span: 12,
					hidden: ":isEdit",
					value: 0,
					group: "financial",
					component: {
						name: "el-input-number",
						props: {
							placeholder: "请输入特殊课课时"
						}
					},
					rules: {
						required: true,
						message: "特殊课课时不能为空"
					}
				},
				{
					prop: "discount",
					label: "优惠情况",
					hidden: ":isEdit",
					span: 24,
					group: "financial",
					component: {
						name: "el-input",
						type: "textarea",
						size: "medium",
						props: {
							placeholder: "请输入优惠情况"
						}
					}
				},
				{
					prop: "financeNote",
					label: "备注",
					span: 24,
					hidden: ":isEdit",
					group: "financial",
					component: {
						name: "el-input",
						type: "textarea",
						size: "medium",
						props: {
							placeholder: "请输入财务备注"
						}
					}
				}
			]
		});

		// 表格配置
		const table = reactive<Table>({
			columns: [
				{
					type: "selection",
					width: 60
				},
				{
					type: "index",
					label: "#",
					width: 60
				},
				{
					prop: "name",
					label: "姓名",
					width: 140,
					sortable: true
				},
				{
					prop: "student_id",
					label: "学号",
					width: 140,
					sortable: true
				},
				{
					prop: "gender",
					label: "性别",
					width: 90,
					dict: [
						{
							label: "男",
							value: 1,
							type: "success"
						},
						{
							label: "女",
							value: 0,
							type: "danger"
						}
					]
				},
				{
					prop: "birthday",
					label: "出生日期",
					width: 140,
					sortable: true
				},
				{
					prop: "phone",
					label: "手机号",
					width: 140
				},
				{
					prop: "status",
					label: "状态",
					width: 90,
					sortable: true,
					dict: [
						{
							label: "停学",
							value: 0,
							type: "success"
						},
						{
							label: "停课",
							value: 1,
							type: "danger"
						},
						{
							label: "在读",
							value: 2,
							type: "info"
						}
					]
				},
				{
					prop: "into_date",
					label: "报名日期",
					width: 140,
					sortable: true
				},
				{
					prop: "note",
					label: "备注",
					// width: 140,
					sortable: false
				},
				// {
				// 	prop: "stop_time",
				// 	label: "暂停时间",
				// 	width: 140,
				// 	sortable: true
				// },
				{
					label: "操作",
					type: "op",
					width: 100,
				}
			]
		});

		// crud 加载
		function onLoad({ ctx, app }: CrudLoad) {
			// 绑定 service
			ctx.service(service.studentService).done();
			app.refresh({ ...form.value });
		}

		const show = () => {
			is_show.value = !is_show.value;
			is_show1.value = !is_show1.value;
			console.log(is_show.value);
			// 刷新el-table组件
			refs.value.crud.refresh({ ...form.value });
		};
		return {
			refs,
			setRefs,
			upsert,
			table,
			onLoad,
			is_show,
			is_show1,
			show,
			// 筛选
			form,
			searchSubmit,
			resetSerach,
			status_list,
			onUpsertOpen
		};
	}
});
</script>

function getNowFormatDate(): any {
  throw new Error("Function not implemented.");
}
